<template>
  <div>
    <!-- Home 主页 -->
    <!-- 1.0 推荐歌单 -->
    <h3 class="title">推荐歌单</h3>
    <!-- 1.1 Layout 布局 - 设置列元素间距 -->
    <van-row gutter="5">
      <van-col
        span="8"
        v-for="item in reList"
        :key="item.id"
      >
        <van-image
          width="100%"
          height="3rem"
          fit="cover"
          :src="item.picUrl"
        />
        <p class="song_name">{{ item.name }}</p>
      </van-col>
    </van-row>
    <!-- 2.0 最新音乐 -->
    <h3 class="title">最新音乐</h3>
    <!-- 2.1 单元格 -->
    <van-cell
      :title="item.name"
      size="large"
      :label="item.song.artists[0].name + ' - ' + item.name"
      center
      v-for="item in newList"
      :key="item.id"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon
          name="play-circle-o"
          size="0.6rem"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
// 目标: 铺设推荐歌单
// 1. van-row和van-col来搭建外框布局
// 2. van-col里内容(van-image和p)
// 3. 调整间距和属性值
// 4. 调用封装的api/index.js-推荐歌单api方法
// 5. 拿到数据保存到data里变量-去上面循环标签

// 目标: 铺设最新音乐
// 1. van-cell铺设一套标签结构
// 2. 自定义右侧插槽里小图标, 调整垂直居中
// 3. api/index.js-封装导出获取最新音乐接口方法
// 4. 获取数据循环铺设页面即可

// 导入所需接口
import { recommendMusicAPI, newMusicAPI } from "../../api/Home";
// console.log(recommendMusicAPI);
export default {
  data() {
    return {
      // 推荐音乐
      reList: [],
      // 最新音乐
      newList: [],
    };
  },
  created() {
    // 调用后函数后，返回 Promise 对象
    recommendMusicAPI({ limit: 6 }).then((res) => {
      // console.log(res);
      this.reList = res.data.result;
    });
    // 网易云音乐- 首页 - 最新音乐
    newMusicAPI().then((res) => {
      // console.log(res);
      this.newList = res.data.result;
    });
  },
};
</script>

<style scoped>
/* 标题 */
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
/* 推荐歌单 - 歌名 */
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.266667rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}

</style>